<template>
	<view class="coupon-container">
		<!-- //优惠券 -->
		<u-popup class="coupon-popup pore" v-if="showDialog" :show="showDialog" @close="closeshowyhq" mode="center"
			:customStyle="{'width':'354px','position':'relative'}" @open="showDialog = true" round="20"
			bgColor="transparent">
			<view class="coupon-wrap">
				<view class="coupon-title">
					<text>小石福利礼包</text>
				</view>
				<view class="coupon-wrap-list">
					<view class="coupon-content-wrap">
						<view class="coupon-item" v-for="(coupon,index) in couponList" :key="coupon.id">
							<view class="coupon-info">
								<view class="coupon-left">
									<text class="amount">{{ formatCouponType(coupon) }}</text>
									<text class="amount-text">{{ formatCouponDiscount(coupon) }}</text>
								</view>
								<view class="coupon-right">
									<text class="coupon-type ellipsis">{{ coupon.name }}</text>
									<text class="coupon-date">{{ formatCouponText(coupon) }}</text>
								</view>
							</view>
							<view class="coupon-tips ellipsis">
								<text class="coupon-tips-text">{{formatCouponRangeText(coupon)}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="receive-btn" @tap="handleGetCoupon">
					<text class="receive-btn-text">立即领取福利</text>
				</view>
			</view>
			<view class="close-btn-wrap" @tap="showDialog = false"></view>
		</u-popup>
		<!-- //优惠券领取成功 -->
		<u-popup :show="showDialogSuccess" @close="closeshowsuccess = false" mode="center"
			:customStyle="{'width':'30%','position':'relative'}" @open="showDialogSuccess = true" round="20"
			bgColor="#333">
			<view class="p30 pore textC">
				<image src="@/static/images/coin.png" mode="widthFix" style="width: 87px;"></image>
				<view class="cfff f24">领取成功</view>
			</view>
		</u-popup>
	</view>
	
</template>

<script>
	import {
		receiveCoupons
	} from '@/common/api_housekeeping.js'
	import {
		getCouponList
	} from '@/common/api_tuangou.js'
	
	export default {
		data() {
			return {
				showDialog: false,
				showDialogSuccess: false,
				couponList: []
			}
		},
		mounted() {
			if (this.hasLogin) {
				this.getCouponList()
			}
		},
		onLoad(option) {
			
		},
		computed: {
			ids () {
				return this.couponList.map(item => item.id).join(',')
			}
		},

		methods: {
			async getCouponList() {
				let res = await getCouponList()
				if (res.code == 200) {
					if (res.data.length) {
						this.couponList = res.data
						this.showDialog = true
					} else {
						this.couponList = []
						this.showDialog = false
					}
				}
			},
			// 立即领取
			async handleGetCoupon() {
				uni.showLoading({
					mask: true
				})
				const res = await receiveCoupons({
					ids: encodeURIComponent(this.ids)
				})
				if (res.code == 200) {
					this.showDialog = false
					this.showDialogSuccess = true
					setTimeout(() => {
						this.showDialogSuccess = false
					}, 1000)
					this.$emit('receiveCouponSuccess')
				}
				uni.hideLoading()
			},
			// 转换优惠券类型金额
			formatCouponType(coupon) {
				if (coupon.conpType === 1) { // 满减券
					return `${coupon.conpTextObject.deductionAmount}元`
				} else if (coupon.conpType === 2) { // 折扣券
					return `${Number(coupon.conpTextObject.discount)}折`
				} else if (coupon.conpType === 3) { // 体验券
					return '无门槛'
				}
			},
			// 最高优惠
			formatCouponDiscount(coupon) {
				if (coupon.conpType === 1) { // 满减券
					return `满${coupon.conpTextObject.fullAmount}元可用`
				} else if (coupon.conpType === 2) { // 折扣券
					return `最高减${coupon.conpTextObject.maxReduction}元`
				} else if (coupon.conpType === 3) { // 体验券
					return '满0元可用'
				}
			},
			// 转换优惠券类型文本
			formatCouponText(coupon) {
				if (coupon.lifespanTextObject.startTime && coupon.lifespanTextObject.endTime) {
					return `${coupon.lifespanTextObject.startTime.split(' ')[0]}至${coupon.lifespanTextObject.endTime.split(' ')[0]}`
				} else if (coupon.lifespanTextObject.startTime && !coupon.lifespanTextObject.endTime) {
					return `有效期${coupon.lifespanTextObject.startTime.split(' ')[0]}起`
				} else if (!coupon.lifespanTextObject.startTime && !coupon.lifespanTextObject.endTime) {
					return `有效期无限制`
				}
			},
			// 业务范围
			formatCouponRangeText(coupon) {
				if (coupon.range === 1 && coupon.type === 1) {
					return '全家政业务'
				} else if (coupon.range === 1 && coupon.type === 2) {
					return '全团购业务'
				} else if (coupon.range === 2 && coupon.type === 1) {
					return '指定家政服务'
				} else if (coupon.range === 2 && coupon.type === 2) {
					return `指定团购服务(${coupon.subName})`
				}
			}
			
		}
	}
</script>

<style lang="scss">
	.coupon-container {
		z-index: 999;
		.coupon-wrap {
			position: relative;
			height: 900rpx;
			padding: 48rpx 0 0 0;
			background: url('https://hxs.dsjhs.com:553/prod-api/profile/coupon_bg_new.png') no-repeat center center;
			background-size: 100% 100%;
			box-sizing: border-box;
			.coupon-title {
				margin-bottom: 42rpx;
				text-align: center;
				text {
					font-size: 22px;
					color: #34314F;
					line-height: 26px;
				}
			}
			.coupon-wrap-list {
				// display: flex;
				// flex-direction: column;
				// align-items: center;
				box-sizing: border-box;
				// padding-left: 12rpx;
				.coupon-content-wrap {
					width: 100%;
					height: 580rpx;
					padding-top: 10rpx;
					overflow-y: auto;
					display: flex;
					flex-direction: column;
					align-items: center;
					box-sizing: border-box;
				}
				.coupon-item {
					width: 551rpx;
					// width: 100%;
					height: 172rpx;
					padding: 12rpx 0;
					margin-bottom: 24rpx;
					background: url('https://hxs.dsjhs.com:553/prod-api/profile/coupon_item_bg.png') no-repeat top left;
					background-size: contain;
					box-sizing: border-box;
					.coupon-info {
						display: flex;
						
						.coupon-left {
							flex: 0 0 200rpx;
							text-align: center;
							border-right: 2rpx solid #f7f7f7;
							.amount {
								display: block;
								font-weight: 600;
								font-size: 40rpx;
								color: #FF7F1C;
								line-height: 28px;
								text-align: center;
							}
							.amount-text {
								font-weight: 400;
								font-size: 26rpx;
								color: #FF7F1C;
								line-height: 18px;
								text-align: center;
							}
						}
						.coupon-right {
							flex: auto;
							padding-top: 10rpx;
							padding-left: 24rpx;
							text-align: left;
							.coupon-type {
								display: block;
								font-weight: 600;
								font-size: 14px;
								color: #34314F;
								line-height: 20px;
								margin-bottom: 4rpx;
							}
							.coupon-date {
								font-weight: 400;
								font-size: 26rpx;
								color: rgba(52, 49, 79, 0.5);
								line-height: 18px;
							}
						}
					}
					.coupon-tips {
						max-width: 520rpx;
						padding-left: 26rpx;
						margin-top: 10rpx;
						.coupon-tips-text {
							font-weight: 400;
							font-size: 24rpx;
							color: rgba(52, 49, 79, 0.5);
							line-height: 16px;
							text-align: left;
						}
					}
				}
			}
			.receive-btn {
				position: absolute;
				bottom: 74rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 348rpx;
				height: 96rpx;
				background: #FFDE6D;
				border-radius: 20px;
				line-height: 96rpx;
				text-align: center;
				.receive-btn-text {
					font-weight: 600;
					font-size: 32rpx;
					color: #34314F;
					line-height: 22px;
					text-align: center;
				}
			}
		}
		
		.close-btn-wrap {
			position: relative;
			top: 32rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 48rpx;
			height: 48rpx;
			background: url('@/static/images/close-icon.png') no-repeat center center;
			background-size: 100% 100%;
		}
		.ellipsis {
			max-width: 320rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
</style>